<template>
  <Tabs>
    <template v-for="item in list"
              :key="item.key">
      <TabPane :tab="item.name">
        <component :id="id"
                   :is="item.component" />
      </TabPane>
    </template>
  </Tabs>
</template>

<script lang="ts">
import { Tabs } from 'ant-design-vue';
import { tabList, AddTabList, TabItem } from './index';
import { defineComponent, ref, computed, unref } from 'vue';
import Form from './addForm/index.vue';
import ProductList from './productList/index.vue';
import ActivityList from './activityList/index.vue';
import { useRoute } from 'vue-router';
export default defineComponent({
  components: { Tabs, Form, ProductList, ActivityList },
  setup() {
    const id = ref<any>();
    const router = useRoute();
    id.value = router.query.id;
    const list = computed(() => {
      if (unref(id)) {
        return tabList;
      } else {
        return AddTabList;
      }
    });
    return {
      id,
      list,
    };
  },
});
</script>

<style lang="less" scoped>
TabPane {
  min-width: 100%;
  padding: 16px;
}
</style>
